<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2017/10/29
  Time: 23:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>$Title$</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.8.3.js"></script>
    <style type="text/css">
        body {
            height: 100%;
            min-width: 1000px;
            cursor: default;
        }

        #explore_header {
            position: relative;
            height: 38.2%;
            min-height: 293px;
            width: 1000px;
            margin: 0 auto;
        }

        #e-top {
            height: 61.8%;
            min-height: 181px;
            position: relative;
            z-index: 0;
            text-align: center;
        }

        #e-top-img {
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -135px;
        }

        #e-top_wrap, #s_btn, #s_kw {
            display: inline-block;
            vertical-align: top;
        }

        #e-top_wrap {
            margin: 0px auto;
            position: relative;
        }

        #s_kw {
            margin-left: 110px;
        }

        #s_kw_explore {
            width: 536px;
            height: 39px;
            margin: 0px auto;
            background: url("images/insert.gif"), 536px, 39px;
            border: 1px solid green;
        }

        #su {
            width: 105px;
            height: 39px;
            background: url("images/button.gif");
            border: 1px solid red;
        }

        #result {
            width: 534px;
            list-style: none;
            border: 1px solid red;
        }

    </style>
    <script type="text/javascript">
        var main = function () {
            var a = document.getElementById("s_kw_explore");
            a.onkeyup = function () {
                var value = document.getElementById("s_kw_explore").value;
                if (value.length > 0) {
                    document.getElementById("result").style.display = "block";
                    var request = new XMLHttpRequest();
                    var url = "/explore?value=" + value;
                    var method = "GET";
                    request.open(method, url);
                    request.send(null);
                    request.onreadystatechange = function () {
                        if (request.readyState == 4) {
                            if (request.status == 200 || request.status == 304) {
                                var text = request.responseText;
                                if (text.length > 0) {
                                    var result = JSON.parse(text);
                                    var end = document.getElementById("result");
                                    var childs = end.childNodes;
                                    for (var i = childs.length - 1; i >= 0; i--) {
                                        end.removeChild(childs[i]);
                                    }
                                    for (var i = 0; i < result.length; i++) {
                                        var li = document.createElement("li");
                                        var a = document.createElement("a");
                                        a.appendChild(document.createTextNode(result[i].value));
                                        a.setAttribute("id", i);
                                        li.appendChild(a);
                                        a.onclick = function () {
                                            $("#s_kw_explore").val(this.text);
                                        }
                                        end.appendChild(li);
                                    }
                                }
                            }
                        }
                    }
                } else {
                    document.getElementById("result").style.display = "none";
                }
            }
            a.onfocus = function () {
                var value = document.getElementById("s_kw_explore").value;
                if (value == 0) {
                    var end = document.getElementById("result");
                    var childs = end.childNodes;
                    for (var i = childs.length - 1; i >= 0; i--) {
                        end.removeChild(childs[i]);
                    }
                }
            }
        }
    </script>
</head>
<body onload="main()">
<div id="explore_header">
    <div id="e-top">
        <img id="e-top-img" src="images/lago.gif">
    </div>
    <div id="e-top_wrap">
            <span id="s_kw">
                <input id="s_kw_explore" type="text"/>
                <div id="result">

                </div>
            </span>
        <span id="s_btn">
              <button id="su" class="btn self-btn bg s_btn"/>
        </span>
    </div>
</div>
</body>
</html>
